<template>
  <view>
    <view class="recommend_wrap">
      <view class="recommend_flex" v-for="item in recommends" :key="item.id">
        <img :src="item.thumb" />
      </view>
    </view>
    <view class="month">
      <view class="monthes_info">
        <text> {{ monthes.DD }} / </text>
        {{ monthes.MM }} 月
      </view>
      <view class="monthes_text"> {{ monthes.title }} </view>
      <view class="monthes_title_more">更多 > </view>
    </view>
    <view class="monthes_content">
      <view
        class="monthes_item"
        v-for="(item, index) in monthes.items"
        :key="item.id"
      >
        <go-detail :list="monthes.items" :index="index">
          <img :src="item.thumb + item.rule.replace('$<Height>', 360)" />
        </go-detail>
      </view>
    </view>
  </view>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      recommends: [],
      hots: [],
      monthes: {},
      params: {
        // 要获取几条
        limit: 30,
        // 关键字
        order: "hot",
        // 要跳过几条
        skip: 0,
      },
    };
  },
  mounted() {
    this.getRecommond();
  },
  methods: {
    getRecommond() {
      this.request({
        url: "http://157.122.54.189:9088/image/v3/homepage/vertical",
        data: this.params,
      }).then((res) => {
        this.recommends = res.res.homepage[1].items;
        this.monthes = res.res.homepage[2];
        this.monthes.MM = moment(this.monthes.stime).format("MM");
        this.monthes.DD = moment(this.monthes.stime).format("DD");
        this.hots = res.res.vertical;
        console.log(res);
      });
    },
  },
};
</script>

<style lang="scss">
.recommend_wrap {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .recommend_flex {
    width: 45%;

    img {
      width: 100%;
    }
  }
}
.month {
  display: flex;
  justify-content: space-around;
  align-items: center;
  .monthes_info {
    color: bisque;
  }
  .monthes_text {
    font-size: 20px;
  }
  .monthes_title_more {
    font-size: 10px;
  }
}
</style>